<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .happy {

    }

    .sad {
    }

    .normal {
    }

    .a1 {
    }

    .a2 {
    }

    .a3 {
    }
  </style>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <!--绑定class样式,适用于样式的类名不确定-->
  <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
  <br/>

  <!--绑定class样式,数组形式,适用于绑定的样式的名字和数量都不确定-->
  <div class="basic" :class="arr">{{name}}</div>

  <!--绑定class样式,对象形式,适用于绑定的样式的名字和数量都确定,但要动态决定用不用-->
  <div class="basic" :class="classObj">{{name}}</div>

  <!--绑定class样式,对象形式,适用于绑定的样式的名字和数量都确定,但要动态决定用不用-->
  <div class="basic" :style="styleObj">{{name}}</div>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#root',
    data: {
      name: 'hello',
      mood: 'normal',
      arr: ['a1', 'a2', 'a3'],
      classObj: {
        a1: false,
        a2: false,
        a3: false
      },
      styleObj:{
        fontSize:'40px',
        color:'red',
        backgroundColor:'orange'
      }
    },
    methods: {
      changeMood() {
        const arr = ['happy', 'sad', 'normal']
        const i = Math.floor(Math.random() * 3);
        console.log('Math.floor(Math.random()*3):', i)
        this.mood = arr[i]
      }
    }

  });
</script>
</body>
</html>
